<template>
  <n-modal v-bind="$attrs">
    <n-card :style="cardStyle" :title="title" aria-modal="true" role="dialog">
      <!-- close icon -->
      <template #header-extra v-if="showCloseIcon">
        <slot name="footer" v-if="$slots.closeIcon" />
        <n-button quaternary circle @click="handleClose">
          <template #icon>
            <n-icon size="20">
              <close />
            </n-icon>
          </template>
        </n-button>
      </template>
      <slot />
      <!-- footer -->
      <template #footer v-if="showFooter">
        <slot name="footer" v-if="$slots.footer" />
        <template v-else>
          <div class="text-right">
            <n-button
              v-if="showCancel"
              quaternary
              :class="{ 'mr-[10px]': showConfirm }"
              @click="handleCancel"
            >
              {{ cancelText }}
            </n-button>
            <n-button
              v-if="showConfirm"
              type="primary"
              :loading="confirmLoading"
              @click="handleConfirm"
            >
              {{ confirmText }}
            </n-button>
          </div>
        </template>
      </template>
    </n-card>
  </n-modal>
</template>
<script lang="ts" setup>
import { computed, useSlots } from "vue";
import { Close } from "@vicons/ionicons5";
import type { IBasicModalProps } from "./props";

const $slots = useSlots();

const props = withDefaults(defineProps<IBasicModalProps>(), {
  title: "",
  width: "600px",
  showCloseIcon: true,
  showFooter: true,
  showConfirm: true,
  confirmLoading: false,
  confirmText: "确定",
  showCancel: true,
  cancelText: "取消",
});

const cardStyle = computed(() => {
  let styleObj: any = {};
  if (props.width) {
    styleObj.width = props.width;
  }
  return styleObj;
});

const emit = defineEmits(["close", "cancel", "confirm"]);

const handleClose = () => {
  emit("close", false);
};

const handleCancel = () => {
  emit("cancel");
};

const handleConfirm = () => {
  emit("confirm");
};
</script>
